<template>
	<PageWrapper contentFullHeight fixedHeight :contentClass="'flex'">
		<div class="tree h-[calc(100%)] flex-shrink-0">
			<div class="text-xl font-bold">部门列表</div>
			<div class="tree-wrap mt-3">
				<Tree :tree-data="deptTree" :fieldNames="{ key: 'deptId', title: 'deptName' }" @select="onSelectDept">
				</Tree>
			</div>
		</div>
		<div class="flex-grow">
			<BasicTable @register="registerTable" :keyWordInfo="keyWordInfo">
				<template #beforeTable>
					<div class="pt-3 pb-3">
						<a-button class="mr-5" type="primary" @click="handleCreate">新增</a-button>
						<a-button @click="getpage">分页信息</a-button>
					</div>
				</template>
				<template #bodyCell="{ column, record }">
					<template v-if="column.key == 'action'">
						<TableAction :divider="true" :actions="createActions(record)"></TableAction>
					</template>
				</template>
			</BasicTable>
		</div>
		<TreeAndTableModal @register="registerModal" @success="handleSuccess"></TreeAndTableModal>
	</PageWrapper>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import { PageWrapper, BasicTable, TableAction } from '#/components';
import { useModal, useTable } from '#/hooks';
import { deleteUser, getPrincipaltree, getUserList } from '@/api/demo';
import { Tree } from 'ant-design-vue';
import type { ActionItem } from '#/types';
import TreeAndTableModal from './components/TreeAndTableModal.vue';
import { useMessage } from '@/hooks/web/useMessage';

const columns = [
	{
		title: '用户名',
		dataIndex: 'username',
	},
	{
		title: '姓名',
		dataIndex: 'name',
	},
	{
		title: '电话',
		dataIndex: 'mobile',
	},
	{
		title: '角色',
		dataIndex: 'roleNameList',
	},
	{
		title: '职位',
		dataIndex: 'posts',
	},
	{
		title: '部门',
		dataIndex: 'deptName',
	},
];

export default defineComponent({
	name: 'TreeAndTableDemo',
	components: { PageWrapper, Tree, BasicTable, TableAction, TreeAndTableModal },
	setup() {
		const deptTree = ref([]);
		const keyWordInfo = reactive<Recordable>({});

		const [registerTable, { reload, getPaginationRef }] = useTable({
			columns,
			rowKey: 'userId',
			api: getUserList,
			useSearchForm: true,
			formConfig: {
				baseColProps: { span: 6 },
				schemas: [
					{
						field: 'username',
						label: '用户名',
						component: 'Input',
					},
					{
						field: 'name',
						label: '姓名',
						component: 'Input',
					},
				],
			},
			actionColumn: {
				title: '操作',
				key: 'action',
				dataIndex: 'action',
				width: 240,
			},
		});

		const [registerModal, { openModal }] = useModal();

		const { createMessage } = useMessage();

		getPrincipaltree().then(data => {
			deptTree.value = data;
		});

		function createActions(record: Recordable): ActionItem[] {
			return [
				{
					title: '编辑',
					onClick: handleEdit.bind(null, record),
					disabled: record.username == 'admin',
				},
				{
					title: '删除',
					ifShow: record.username !== 'admin',
					popConfirm: {
						title: '是否确认删除',
						confirm: handleDelete.bind(null, record),
					},
				},
			];
		}
		function getpage() {
			console.log(getPaginationRef());
		}
		function onSelectDept(selectedKeys: number[]) {
			keyWordInfo.deptId = selectedKeys[0];
			reload();
		}

		function handleCreate() {
			openModal(true, {
				isUpdate: false,
			});
		}
		function handleEdit(record: Recordable) {
			openModal(true, {
				record,
				isUpdate: true,
			});
		}

		function handleDelete(record) {
			deleteUser(record.userId).then(
				() => {
					createMessage.success('删除成功');
					reload();
				},
				err => {
					createMessage.error(err);
				},
			);
		}

		function handleSuccess() {
			createMessage.success('操作成功');
			reload();
		}

		return {
			deptTree,
			onSelectDept,
			registerTable,
			createActions,
			registerModal,
			handleCreate,
			handleSuccess,
			keyWordInfo,
			getpage,
		};
	},
});
</script>
<style lang="less" scoped>
.tree {
	width: 300px;
	border-right: 1px solid #ddd;
	line-height: 45px;
	margin: 0 30px 0 0;
	.tree-wrap {
		width: 290px;
		overflow: auto;
	}
}
</style>
